
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/mui/2.8.0/css/mui.min.css">
    <!--App自定义的css-->
    <!--<link rel="stylesheet" type="text/css" href="http://www.dcloud.io/hellomui/css/app.css"/>-->
    <style>
        .mui-card .mui-control-content {
            padding: 10px;
        }
        .mui-control-content {
            height: 150px;
        }
    </style>
</head>
<body>
<div class="mui-content">
    <div style="padding: 10px 10px;">
        <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted ">
            <a class="mui-control-item mui-active" href="#item1">
                待办公文（8）
            </a>
            <a class="mui-control-item" href="#item2">
                已办公文
            </a>
            <a class="mui-control-item" href="#item3">
                全部公文
            </a>
        </div>
    </div>
    <div>
        <div id="item1" class="mui-control-content mui-active">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell">
                            第一个选项卡子项-1
                        </li>
                        <li class="mui-table-view-cell">
                            第一个选项卡子项-2
                        </li>
                        <li class="mui-table-view-cell">
                            第一个选项卡子项-3
                        </li>
                        <li class="mui-table-view-cell">
                            第一个选项卡子项-4
                        </li>
                        <li class="mui-table-view-cell">
                            第一个选项卡子项-5
                        </li>
                        <li class="mui-table-view-cell">
                            第一个选项卡子项-6
                        </li>
                        <li class="mui-table-view-cell">
                            第一个选项卡子项-7
                        </li>
                        <li class="mui-table-view-cell">
                            第一个选项卡子项-8
                        </li>
                        <li class="mui-table-view-cell">
                            第一个选项卡子项-9
                        </li>
                        <li class="mui-table-view-cell">
                            第一个选项卡子项-10
                        </li>
                        <li class="mui-table-view-cell">
                            第一个选项卡子项-11
                        </li>
                        <li class="mui-table-view-cell">
                            第一个选项卡子项-12
                        </li>
                        <li class="mui-table-view-cell">
                            第一个选项卡子项-13
                        </li>
                        <li class="mui-table-view-cell">
                            第一个选项卡子项-14
                        </li>
                        <li class="mui-table-view-cell">
                            第一个选项卡子项-15
                        </li>
                        <li class="mui-table-view-cell">
                            第一个选项卡子项-16
                        </li>
                        <li class="mui-table-view-cell">
                            第一个选项卡子项-17
                        </li>
                        <li class="mui-table-view-cell">
                            第一个选项卡子项-18
                        </li>
                        <li class="mui-table-view-cell">
                            第一个选项卡子项-19
                        </li>
                        <li class="mui-table-view-cell">
                            第一个选项卡子项-20
                        </li>
                    </ul>
        </div>
        <div id="item2" class="mui-control-content">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    第二个选项卡子项-1
                </li>
                <li class="mui-table-view-cell">
                    第二个选项卡子项-2
                </li>
                <li class="mui-table-view-cell">
                    第二个选项卡子项-3
                </li>
            </ul>
        </div>
        <div id="item3" class="mui-control-content">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    第三个选项卡子项-1
                </li>
                <li class="mui-table-view-cell">
                    第三个选项卡子项-2
                </li>
                <li class="mui-table-view-cell">
                    第三个选项卡子项-3
                </li>
            </ul>
        </div>
    </div>
</div>
<script src="http://apps.bdimg.com/libs/mui/2.8.0/js/mui.min.js"></script>
<script>
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });
</script>

</body>

</html>